<template>
  <el-dialog
    title="字典新增"
    :visible.sync="addZDBShow"
    class="label"
    :before-close="handleClose"
    @close="Close"
  >
    <!-- <el-form ref="addZDBForm" :model="form" :inline="true" :rules="rules">
      <el-form-item label="字典名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" :label-width="formLabelWidth" prop="type">
        <el-select v-model="form.region" placeholder="请选择字典类型">
          <el-option label="字符串" value="String"></el-option>
          <el-option label="对象" value="Object"></el-option>
          <el-option label="布尔" value="Boolean"></el-option>
        </el-select>
      </el-form-item>
    </el-form> -->
    <el-form ref="addZDBForm" :model="form" :rules="rules" :inline="true" label-width="100px" class="demo-ruleForm">
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择字典类型">
          <el-option label="字符串" value="String"></el-option>
          <el-option label="对象" value="Object"></el-option>
          <el-option label="布尔" value="Boolean"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="flex_evenly">
      <el-button size="small" type="success" @click="sendZDB ">提 交</el-button>
      <el-button size="small" type="warning" @click="Close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      addOk: false,
      addZDBShow: true,
      form: {
        name: '',
        type: '',
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择字典类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    sendZDB() {
      this.$refs.addZDBForm.validate((valid) => {
        if (valid) {
          this.$http.post(`/api/addZDB`, { data: this.form }).then(res => {
            console.log(res.data)
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.Close(this.addOk)
            this.$emit('GetList', res.data)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose(done) {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    Close(data) {
      // console.log(data)
      if (data) {
        this.$confirm('你确定要离开吗？')
          .then(_ => {
            this.addZDBShow = false
            this.$refs.addZDBForm.resetFields()
          })
          .catch(_ => {})
      } else {
        this.addZDBShow = false
        this.$refs.addZDBForm.resetFields()
      }
      // if (!this.addOk) {
      //   console.log('关闭')
      //   this.$confirm('你确定要离开吗？')
      //     .then(_ => {
      //       this.addZDBShow = false
      //       this.$refs.addZDBForm.resetFields()
      //     })
      //     .catch(_ => {})
      // } else {
      //   console.log('跳过')
      //   this.addZDBShow = false
      //   this.$refs.addZDBForm.resetFields()
      //   this.addOk = false
      // }
    },
  }
}
</script>

<style>

</style>